<template>
  <div class="withdraw_page">
    <CommonHeader title="提现" />
    <div class="withdraw_content page_no_tab_bar">
      <!-- 选择货币 -->
      <div class="inp_box" @click="selectCurrency">
        <div class="left">
          <img
            :src="`https://qhzx-kline2.oss-ap-southeast-1.aliyuncs.com/logos/${curCoinInfo.name}.png`"
            alt=""
          />
          <span>{{ curCoinInfo.name }}</span>
        </div>
        <div class="right">
          <img src="@/assets/common/go_icon.png" alt="" />
        </div>
      </div>
      <!-- 提现地址 -->
      <div class="input_box">
        <div class="input_label">提现地址</div>
        <div class="input">
          <input
            type="text"
            v-model="ruleForm.address"
            placeholder="请输入提货地址"
          />
        </div>
        <div class="input_rule">{{ rules.address.rule }}</div>
      </div>

      <!-- 提现网络 -->
      <div class="input_box">
        <div class="input_label">提现网络</div>
        <div class="input">
          <select name="" id="" v-model="ruleForm.mainCoinType">
            <option
              v-for="(item, index) in rechageCoinsList"
              :key="index"
              :value="`${item.mainCoinType}/${item.symbol}-${item.primaryNet}`"
            >
              {{ `${item.symbol}-${item.primaryNet}` }}
            </option>
          </select>
        </div>
        <div class="input_rule"></div>
      </div>

      <!-- 数量 -->
      <div class="input_box">
        <div class="input_label">数量：{{ allAssets || 0 }}USDT</div>
        <div class="input network">
          <input
            type="number"
            v-model="ruleForm.amount"
            placeholder="请输入数量"
          />
          <span class="currency font_color">USDT</span>
          <span class="add_text" @click="getMax">Max</span>
        </div>
        <div class="input_rule">{{ rules.amount.rule }}</div>
      </div>

      <!-- 提现手续费 -->
      <div class="fee">提现手续费</div>
      <ul class="fee_info font_color">
        <li>*最小金额15 USDT</li>
        <li>*只可提现于当前网络相匹配的资产，否者将无法找回</li>
        <li>*请勿参与代表，洗钱，非法集资等违法行为，谨慎网络诈骗</li>
      </ul>

      <!-- 提现按钮 -->
      <div class="operate_btn" @click="showDrawer">提现</div>

      <!-- 选择币种 -->
      <SelectCurrency ref="selectCurrencyRef" @choose="changeCoinInfo" :coins="coinTypeList" />
      <!-- 提现验证抽屉 -->
      <WithdrawAuth ref="withdrawAuthRef" :coinInfo="curCoinInfo" :data="ruleForm" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CommonHeader from "@/components/CommonHeader.vue";
import WithdrawAuth from "./components/WithdrawAuth.vue";
import { ElMessage } from "element-plus";
import { getRechageCoin, getWithdrawCoinList } from "@/api/assets";
import SelectCurrency from "./components/SelectCurrency.vue";

// 获取路由对象
const route = useRoute();
const router = useRouter();
// 定义 ref
const selectCurrencyRef = ref();
const withdrawAuthRef = ref();

// 提现数据
const ruleForm: any = ref({
  address: "",
  mainCoinType: "",
  amount: "",
  symbol: "USDT",
});
// 表单验证
const rules: any = reactive({
  address: {
    msg: "请输入地址",
    rule: "",
  },
  amount: {
    msg: "请输入数量",
    rule: "",
  },
});
// 总资产
const allAssets = ref();
// 币种列表
const coinTypeList = ref();
// 主网络
const rechageCoinsList = ref();
// 当前币种
const curCoinInfo = ref({
  name: ""
});

// 选择币种
const selectCurrency = () => {
  selectCurrencyRef.value.showDrawer(10);
};

// 提现验证
const showDrawer = () => {
  if (validateForm()) {
    if (!ruleForm.value.amount) return ElMessage.error("数量不能为0");
    withdrawAuthRef.value.showDrawer(10);
  }
};

// 最大值
const getMax = () => {
  ruleForm.value.amount = allAssets.value;
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].toString().trim() == "") {
      rules[k].rule = rules[k].msg;
      return false;
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};

// 修改币种
const changeCoinInfo = (row: any) => {
  console.log(row);
  
  curCoinInfo.value = row
}

// 获取数据
const getData = () => {
  getWithdrawCoinList().then((res: any) => {
    coinTypeList.value = res.data;
    curCoinInfo.value = res.data[0];

    getRechageCoin(curCoinInfo.value.name).then((res: any) => {
      rechageCoinsList.value = res.data;
      let coin = rechageCoinsList.value[0]
      
      ruleForm.value.mainCoinType = `${coin.mainCoinType}/${coin.symbol}-${coin.primaryNet}`;
    });
  });
};

// 初始化数据
onMounted(() => {
  allAssets.value = route.query.data;
  getData();
});
</script>

<style lang="scss" scoped>
.withdraw_page {
  .withdraw_content {
    .inp_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #141515;
      padding: 10px 5px;
      margin-bottom: 20px;
      border-radius: 10px;
      .left {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }
    }
    .input_box {
      // height: 108px;
      margin-bottom: 30px;
      .input {
        width: 100%;
        height: 50px;
        background-color: #141515;
        margin: 5px 0;
        input,
        select {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #141515;
          color: #babcbf;
          border-radius: 10px;
        }
      }
      .network {
        display: flex;
        align-items: center;
        input {
          flex: 1;
          padding-right: 10px;
        }
        span {
          padding: 0 10px;
        }
        .currency {
          border-right: 1px solid #292c2f;
        }
      }
    }
    .fee {
      margin-bottom: 20px;
    }
    .fee_info {
      font-size: 14px;
      li {
        margin-bottom: 10px;
      }
    }
    .operate_btn {
      margin-top: 30px;
    }
  }
}
</style>
